<template>
    <div class="slider">
        <swiper :options="options" ref="mySwiper">
            <!-- slides -->
            <swiper-slide v-for="item in items" :key="item.href">
                <img :src="item.src">
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination" slot="pagination" v-if="options.pagination"></div>
<!--            <div class="swiper-button-prev" slot="button-prev"></div>-->
<!--            <div class="swiper-button-next" slot="button-next"></div>-->
<!--            <div class="swiper-scrollbar" slot="scrollbar"></div>-->
        </swiper>
    </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css';

  import {swiper, swiperSlide} from 'vue-awesome-swiper';

  export default {
    name: "TheSlider",
    components: {
      swiper,
      swiperSlide
    },
    props:{
      options:{
        type:Object,
        default(){
          return {
            autoplay:true,
            loop:true,
            pagination:{
              el:'.swiper-pagination'
            },
            notNextTick:false
          }
        }
      },
      items:{
        type:Array,
        default() {
          return [];
        }
      }
    }
  };
</script>

<style lang="scss" scoped>

</style>
